<template>
    <div class="login-account">
        <el-form label-width="60px" :rules="rules" :model="account" ref="formRef" hide-required-asterisk>
            <el-form-item prop="username">
                <template #label>
                    <span class="login-form"> 用户名 </span>
                </template>
                <el-input v-model="account.username" />
            </el-form-item>
            <el-form-item prop="password">
                <template #label>
                    <span class="login-form"> 密码 </span>
                </template>
                <el-input v-model="account.password" show-password @blur="losefocus" @focus="getfocus"/>
            </el-form-item>
        </el-form>
        <div class="account-control">
            <el-checkbox v-model="isKeepPassword">记住密码</el-checkbox>
            <el-link type="primary" @click="getpassword">忘记密码</el-link>
        </div>
        <el-button type="primary" class="login-btn" @click="handleLoginClick">立即登录
        </el-button>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { rules } from "../config/account-config";
import { ElMessage, FormInstance } from "element-plus";
import { userlogin,userpw } from "@/api/userapi";
import { Tlogin } from "@/models/login";
import { useUserInfo } from "@store/userinfo";
import { useRouter } from "vue-router";

const isKeepPassword = ref<boolean>(true);
const formRef = ref<FormInstance>();
const userinfo = useUserInfo();
const emit = defineEmits(['getfocus','losefocus']);

const router = useRouter();

const account = reactive({
    username: localStorage.getItem("username") ?? "",
    password: localStorage.getItem("password") ?? "",
});

const getpassword = async () => {
    const res = await userpw({username:account.username});
    if(res.code === 200){
        ElMessage.success(res.msg);
        return;
    }
    ElMessage.error(res.msg);
}

const getfocus = () => {
    emit('getfocus');
}

const losefocus = () => {
    emit('losefocus');
}

const handleLoginClick = () => {
    formRef.value.validate( async (valid) => {
        if (valid) {
        const res:Tlogin = await userlogin(account);
        if(res.code === 200) {
            ElMessage({
                message: res.msg,
                type: "success"
            })
            localStorage.setItem("id",res.data.id);
            if (isKeepPassword) {
                localStorage.setItem("username", account.username);
                localStorage.setItem("password", account.password);
            } else {
                localStorage.removeItem("username");
                localStorage.removeItem("passwword");
            }
            localStorage.setItem("token",res.data.username);
            userinfo.userinfo = res.data;
            router.push({
                path: "/"
            });
            return true;
        }
        ElMessage.error(res.msg);
        }
    });
};
</script>

<style scoped lang="less">
.login-form {
    .el-icon {
        vertical-align: middle;
    }

    span {
        vertical-align: middle;
        margin-left: 4px;
    }
}

.login-account {
    .account-control {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }

    .login-btn {
        width: 100%;
        margin-top: 10px;
    }
}
</style>
